import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'

import SizeUtils from '../../common/SizeUtils'
import ToastUtils from '../../common/ToastUtils'
import HeartConstants from '../../common/HeartConstants'
import Config from '../../config'
import BaseItem from '../common/BaseItem'
import TImage from '../../components/TImage'
import HeartLoveRquestOtherDataAction from '../../actions/heart/HeartLoveRquestOtherDataAction'
import HeartLoveSendLikeUserAction from '../../actions/heart/HeartLoveSendLikeUserAction'
import CommonAvatarView from '../common/CommonAvatarView'

export default class HeartLoveItemView extends BaseItem {
  constructor(props) {
    super(props)

    this.state.likeSuccess = false
    this.state.isResponeUpdate = false
    this.state.is_liked = null
    this.state.loveData = {}
    this.state.themeColor = this.props.data.gender == 1 ? '#3a9bfc' : '#fd9bcc'
    this.state.themeTagColor = this.props.data.gender == 1 ? '#f8faff' : '#fff8fc'
    this._doLike = false
  }

  shouldComponentUpdate(nextProps, nextState) {
    return true
  }

  componentDidMount() {
    // console.log('HeartLoveItemView', this.props.data)
  }

  componentWillUpdate(nextProps, nextState) {
    if (nextState.likeSuccess === true) {
      nextState.likeSuccess = false
      this._doLike = true
      this._requestData()
    }
    if (nextProps.data.lover_id != this.props.data.lover_id || nextProps.data.is_liked != this.props.data.is_liked) {
      nextState.is_liked = null
    }
    if (nextState.isResponeUpdate === true) {
      nextState.isResponeUpdate = false
      if (this._doLike) {
        let likeText = nextState.is_liked === true ? '已点赞' : '已取消点赞'
        ToastUtils.show(likeText)
        if (nextState.is_liked === true) {
          this.props.data.likers_num++
        } else {
          this.props.data.likers_num--
        }

        this._doLike = false
      }
    }
  }

  render() {
    return (
      <TouchableOpacity
        style={{
          flex: 1,
          borderBottomWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: '#eeeeee',
          paddingTop: SizeUtils.translateDesignHeightToCode(20),
          paddingBottom: SizeUtils.translateDesignHeightToCode(20),
          paddingLeft: SizeUtils.translateDesignWidthToCode(20),
          paddingRight: SizeUtils.translateDesignWidthToCode(20)
        }}
        onPress={this._onPress.bind(this)}
      >
        <View
          style={{
            flex: 1,
            flexDirection: 'row'
          }}
        >
          {this._renderContentItemImage(this.props.data)}
          {this._renderContentItemRight(this.props.data)}

          {/* <TouchableOpacity
            style={{
              position: 'absolute',
              bottom: 0,
              right: 10,
              height: SizeUtils.translateDesignWidthToCode(40),
              width: SizeUtils.translateDesignWidthToCode(40)
            }}
            onPress={() => {
              alert('11')
            }}
          >
            <TImage
              source={require('../../../resource/images/quanzi/btn_more1.png')}
              style={{ width: 34, height: 34 }}
              resizeMode={'contain'}
            />
          </TouchableOpacity> */}
        </View>
        <View style={{ flexDirection: 'row', marginTop: 2, marginLeft: 6, marginRight: 20 }}>
          <TImage source={this._getBottomImage()} style={{ width: 36, height: 34 }} />
          <Text
            style={{
              marginLeft: SizeUtils.translateDesignWidthToCode(20),
              lineHeight: 16,
              marginRight: SizeUtils.translateDesignWidthToCode(40),
              color: '#999999',
              fontSize: SizeUtils.translateFontSizeToCode(22)
            }}
          >
            {this.props.data.self_intro}
          </Text>
        </View>
        {this.props.isReport?<View
          style={{
            position: 'absolute',
            right: 15,
            bottom: 0,
            height: SizeUtils.translateDesignWidthToCode(40),
            width: SizeUtils.translateDesignWidthToCode(40)
          }}
        >
          <TouchableOpacity
            onPress={() => {
              // alert('11')
              this.props.showPopover(this.item,this.props.data)
            }}
            ref={ref=>this.item=ref}
          >
            <TImage
              source={require('../../../resource/images/heart/report_img.png')}
              style={{ width: 34, height: 34 }}
              resizeMode={'contain'}
            />
          </TouchableOpacity>
        </View>:null}
      </TouchableOpacity>
    )
  }

  _requestData() {
    new HeartLoveRquestOtherDataAction().call(this, { lover_id: this.props.data.lover_id })
  }

  _onPress() {
    this.gotoPage(Config.pages.heart_love_other_data, { loveData: this.props.data, myLoveData: this.props.myLoveData })
  }

  _renderContentItemImage(data) {
    return (
      <View style={{}}>
        <CommonAvatarView avatarUri={this._getImageSource(data)} size={124} />
      </View>
    )
  }

  _getImageSource(data) {
    if (data.image_urls instanceof Array && data.image_urls.length > 0) {
      if (typeof data.image_urls[0] == 'string') {
        return data.image_urls[0]
      } else {
        return data.image_urls[0]
      }
    } else {
      return ''
    }
  }

  _renderContentItemRight(data) {
    return (
      <View style={{ flex: 1, flexDirection: 'column', paddingLeft: SizeUtils.translateDesignWidthToCode(20) }}>
        {this._renderContentItemName(data)}
        {this._renderContentItemTags(data)}
      </View>
    )
  }

  //名字
  _renderContentItemName(data) {
    const keyWord = this.props.keyWord
    const strat = data.nick.indexOf(keyWord)
    const str1 = data.nick.substr(0, strat)
    const str2 = data.nick.substr(strat, (keyWord && keyWord.length) || 0)
    const str3 = data.nick.slice(strat + ((keyWord && keyWord.length) || 0))
    const realName = true ? data.by_name : data.nick
    return (
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          marginTop: SizeUtils.translateDesignHeightToCode(6),
          marginBottom: SizeUtils.translateDesignHeightToCode(10)
        }}
      >
        {keyWord ? (
          <Text style={{ fontSize: SizeUtils.translateFontSizeToCode(26), color: '#333333' }}>
            {str1}
            <Text style={{ color: 'red', fontWeight: 'bold' }}>{str2}</Text>
            {str3}
          </Text>
        ) : (
          <Text style={{ fontSize: SizeUtils.translateFontSizeToCode(26), fontWeight: 'bold', color: '#333333' }}>
            {realName}
          </Text>
        )}
        {this._renderContentItemAge(data)}
        <TImage source={this._getSexImage()} style={{ marginLeft: 2, width: 26, height: 26 }} />
        <TouchableOpacity
          style={{
            position: 'absolute',
            right: 0,
            flexDirection: 'row',
            width: SizeUtils.translateDesignWidthToCode(100),
            justifyContent: 'center',
            alignItems: 'center'
          }}
          onPress={this._onPressLove.bind(this)}
        >
          <TImage source={this._getHeartImage()} style={{ width: 34, height: 30 }} />
          <Text
            style={{
              marginLeft: SizeUtils.translateDesignWidthToCode(10),
              color: this._isLike() ? '#db3132' : '#999999',
              fontSize: SizeUtils.translateFontSizeToCode(18)
            }}
          >
            {data.likers_num}
          </Text>
        </TouchableOpacity>
      </View>
    )
  }

  _getHeartImage() {
    if (this._isLike()) {
      return require('../../../resource/images/heart/icon_zan_red.png')
    }
    return require('../../../resource/images/heart/icon_zan_gray.png')
  }
  _getBottomImage() {
    if (this.props.data.gender == 1) {
      return require('../../../resource/images/heart/icon_bottom_m.png')
    }
    return require('../../../resource/images/heart/icon_bottom_f.png')
  }
  _getSexImage() {
    if (this.props.data.gender == 1) {
      return require('../../../resource/images/heart/icon_sex_f.png')
    }
    return require('../../../resource/images/heart/icon_sex_m.png')
  }

  _isLike() {
    let boo = false
    if (this.state.is_liked == null) {
      boo = this.props.data.is_liked == 1
    } else {
      boo = this.state.is_liked
    }
    return boo
  }

  _onPressMessage() {}

  _onPressLove() {
    new HeartLoveSendLikeUserAction().call(this, this.props.data)
  }

  //标签
  _renderContentItemTags(data) {
    const post_property = data.post_property || 1
    const horoscope = data.horoscope || 1
    const education = data.education || 1
    return (
      <View
        style={{
          flexDirection: 'row',
          paddingRight: SizeUtils.translateDesignHeightToCode(80),
          paddingTop: SizeUtils.translateDesignHeightToCode(5),
          paddingBottom: SizeUtils.translateDesignHeightToCode(14),
          flexWrap: 'wrap'
        }}
      >
        {this._renderContentItemTagPer(data.height + 'cm')}
        {this._renderContentItemTagPer(data.department)}
        {this._renderContentItemTagPer(HeartConstants.manbasicInformationDatas.post_property.params[post_property - 1])}
        {this._renderContentItemTagPer(HeartConstants.manbasicInformationDatas.education.params[education - 1])}
        {this._renderContentItemTagPer(HeartConstants.manbasicInformationDatas.horoscope.params[horoscope - 1])}
      </View>
    )
  }
  //年龄
  _renderContentItemAge(data) {
    const age = data.age;
    if (age<1) {
      return null
    }
    return (
      <View
        style={{
          backgroundColor: this.state.themeColor,
          borderRadius: SizeUtils.translateDesignNumToCode(26),
          height: SizeUtils.translateDesignHeightToCode(26),
          marginLeft: SizeUtils.translateDesignWidthToCode(10),
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <Text
          style={{
            color: '#fff',
            backgroundColor: this.state.themeColor,
            fontSize: SizeUtils.translateFontSizeToCode(18),
            textAlign: 'center',
            marginTop: SizeUtils.translateDesignHeightToCode(3),
            marginBottom: SizeUtils.translateDesignHeightToCode(3),
            marginLeft: SizeUtils.translateDesignWidthToCode(8),
            marginRight: SizeUtils.translateDesignWidthToCode(8)
          }}
        >
          {`${age}岁`}
        </Text>
      </View>
    )
  }
  //标签
  _renderContentItemTagPer(tag) {
    return (
      <View
        style={{
          backgroundColor: this.state.themeTagColor,
          borderRadius: SizeUtils.translateDesignNumToCode(40),
          height: SizeUtils.translateDesignHeightToCode(30),
          marginTop: SizeUtils.translateDesignHeightToCode(5),
          marginBottom: SizeUtils.translateDesignHeightToCode(5),
          borderColor: this.state.themeColor,
          borderWidth: 0.5,
          marginRight: SizeUtils.translateDesignWidthToCode(10),
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <Text
          style={{
            color: this.state.themeColor,
            fontSize: SizeUtils.translateFontSizeToCode(20),
            textAlign: 'center',
            marginLeft: SizeUtils.translateDesignWidthToCode(12),
            marginRight: SizeUtils.translateDesignWidthToCode(12)
          }}
        >
          {tag}
        </Text>
      </View>
    )
  }
}
